import { Layout, theme, Space, Button, Col, Row } from 'antd'
import PropTypes from 'prop-types'

const { Header, Content } = Layout

const ContentWrapper = (props) => {
  const {
    token: { borderRadiusLG }
  } = theme.useToken()

  const isDetail = Boolean(props.title.includes('详情'))
  return (
    <Layout
      style={{
        position: 'absolute',
        top: 0,
        right: 0,
        width: '100%',
        height: '100%',
        backgroundColor: '#fff',
        borderRadius: borderRadiusLG,
        zIndex: 1000
      }}
    >
      <Header
        style={{
          padding: '0 10px',
          backgroundColor: '#fff',
          boxShadow: '0 1px 2px rgba(0, 0, 0, .08)'
        }}
      >
        <Row>
          <Col span={3}>
            <h3>{props.title}</h3>
          </Col>
          <Col offset={17} span={4}>
            <Space style={{ justifyContent: 'end' }}>
              <Button onClick={props.onCancel}>取消</Button>
              {
                !isDetail &&
                <Button type="primary" onClick={props.onOk}>
                  保存
                </Button>
              }
            </Space>
          </Col>
        </Row>
      </Header>
      <Content
        style={{
          padding: 24,
          overflow: 'auto'
        }}
      >
        {props.children}
      </Content>
    </Layout>
  )
}

ContentWrapper.propTypes = {
  title: PropTypes.string.isRequired,
  onCancel: PropTypes.func.isRequired,
  onOk: PropTypes.func.isRequired,
  children: PropTypes.node.isRequired
}

export default ContentWrapper